
<div class="init-width">
    <transition name="moves">
        <div v-show="addFlag" class="add-info operate-way">
            <div class="title-info">
                <h4 class="app-title"><span @click="hide"><i class="icon-left back"></i></span>{{$t('joinBtn')}}({{selected}}/{{count}})</h4>
                <span @click="showFlag" class="icon-more right-top"></span>
                <ul v-show="flagUl" class="add-ul">
                    <li @click.stop="importDevice($event)"><i class="icon-import"></i><span>{{$t('importDevice')}}</span></li>
                </ul>
            </div>
            <div @click="hideFlag" class="selected-radio filter-wrapper">
                <div class="input-info">
                    <div @click="showHeightFun" class="cell-down">
                        <span class="icon-right"></span>
                    </div>
                    <input type="search" v-model="searchReset" class="form-control" :placeholder="$t('search')">
                </div>
                <div @click="selectAllDevice($event)" class="radio-info flex flex-ac flex-jce"><span :id="selectMeshAllId" class="span-radio"
                      :class="{'active': (selected == count && count != 0)}"><span></span></span></div>
            </div>
            <div @click="hideFlag" class="filter-content">
                <div class="filter-info" :class="{'height-70': showHeight}">
                    <div class="filter-item">
                        <span class="filter-name"><i class="icon-rss"></i></span>
                        <div class="filter-term display-flex">
                            <span class="rssi">RSSI:&nbsp;&nbsp;</span>
                            <div :id="joinMeshSlider" class="div-slider"></div>
                        </div>
                        <span class="filter-value">{{rssiValue}}</span>
                    </div>
                    <div class="filter-item">
                        <span class="filter-name"><i class="icon-mark" :class="{'red': showFilter}"></i></span>
                        <div class="filter-term">{{$t('favoritesDesc')}}</div>
                        <span class="filter-value" @click="showFilterFun"><i :class="[showFilter ? 'icon-check' : 'icon-uncheck']"></i></span>
                    </div>
                </div>

            </div>
            <div @click="hideFlag" class="content-info scan-device flex-wrapper join-device" :id="joinMeshId" :class="{'height': showHeight}">
                <div class="overflow-touch">
                    <div @click.stop="selectMac(item.bssid)" v-for="item in list" class="item">
                        <div @click.stop="saveScanMac(item.mac)" class="item-icon-circle">
                            <i :class="getIcon(item.tid)"></i>
                            <span v-show="showMark(item.mac)"><i class="icon-mark"></i></span>
                        </div>
                        <div class="item-name">
                            <span>{{item.name}}({{getPosition(item.position)}})</span>
                            <span class="desc">Mac: {{item.bssid}}&nbsp;&nbsp;&nbsp;<img class="item-img" :src="getRssiIcon(item.rssi)"/></span>
                        </div>
                        <div class="item-power-small">
                            <span :data-value="item.bssid" class="span-radio" :class="{'active': isSelected(item.bssid)}"><span></span></span>
                        </div>
                    </div>
                </div>

            </div>
            <div v-show="showFooterInfo" class="position-absolute btn-register-wrapper">
                <button :class="{'bg-gray': selected <= 0}" type="submit" class="btn register-btn" @click="conDevice">{{$t('confirmBtn')}}</button>
            </div>
        </div>
    </transition>
    <v-importDevice v-on:importShow="onBackJoinMesh" :importId="importMeshId" ref="import"></v-importDevice>
</div>


